<template>
  <div class="task">
    <div class="taskTop">
      <div class="title">行为决策实验平台</div>
      <div class="phase">
        <el-row style="height: 100%">
          <el-col :span="4"></el-col>
          <el-col
              :span="16"
              style="display: flex; align-items: center; height: 100%">
            <span style="margin-right: 50px">第3场</span>
            <span style="margin-right: 50px" >实验阶段：第1阶段</span>
            <span>实验桌号： {{ $store.state.seatID }}号</span>
          </el-col>
          <el-col :span="4"></el-col>
        </el-row>
      </div>
    </div>

    <div class="taskMain">
      <el-row style="height: 100%">
        <el-col :span="4" style="height: 100%"></el-col>
        <el-col :span="16" style="height: 100%">
          <div class="mainTask">
            <el-row style="height: 100%;padding-top: 15px">
              <el-col
                  :span="8"
                  style="
                  display: flex;
                  align-items: center;
                  height: 100%;
                  font-size: 20px;
                  color: #3360ec;
                  font-weight: 600;
                  padding-top: 8px;
                ">投资任务进度：{{$store.state.currentRound}}/12
             </el-col>
              <el-col :span="8"
                      style="
                  display: flex;
                  align-items: center;
                  height: 100%;
                  font-size: 20px;
                  color: #389e0d;
                  font-weight: 600;
                  justify-content: center;
                  padding-top: 29px;
                "><div class="grid-content ep-bg-purple-light"  />基金{{ showIndex }}走势图</el-col>
              <el-col
                  :span="8"
                  style="
                  display: flex;
                  align-items: center;
                  height: 100%;
                  justify-content: flex-end;
                  font-size: 20px;">当前实验周期剩余时间：<span
                  style="font-size: 28px; font-weight: 600; color: #3360ec"
              ><a-countdown :value="$store.state.rest_Time"/></span
              ></el-col>
            </el-row>
          </div>
        </el-col>
      </el-row>
    </div>

    <div class="chart" id="chart-container" ></div>
    <block class="mainBtn">
      <el-button @click="nextBtn" type="primary">返回</el-button>
    </block>
  </div>


</template>

<script>
import * as echarts from 'echarts'
import {queryTrend} from '@/api/index'
export default {
  name: 'ShowLineChart',
  components: {
    // eslint-disable-next-line

  },

  data() {
    return {
      showIndex : this.$route.query.showIndex,
      fundTrend:[]
    }
  },

  mounted() {
    this.showIndex = this.$route.query.showIndex
    const fundID = this.showIndex
    // console.log(fundID)
    queryTrend({fundID}).then(res=>{
      // console.log(res)//获取基金走势
      this.$store.state.fundTrend = res.fundTrend
      console.log(this.$store.state.fundTrend)
      var chartDom = document.getElementById('main');
      var myChart = echarts.init(document.querySelector('#chart-container'))
      var option;
      var tempData =[]

      tempData =  this.$store.state.fundTrend.slice(0,this.$store.state.currentRound+1)
      console.log(tempData)
 

      option = {
        xAxis: {
          type: 'category',
          data: ['0','1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12']

        },
        yAxis: {
          type: 'value'
        },
 
        series: [
          {
           
            data: tempData,
            type: 'line',
            symbol: 'round',
            symbolSize: 20,

            lineStyle: {
              color: '#B9BEC9',
              width: 4,

              type: 'dashed'
            },
            itemStyle: {
              borderWidth: 3,
              borderColor: '#d4b106',
              color: 'yellow'
            }
          }
        ]
      };

      myChart.setOption(option)
    })




  },

  watch: {



  },

  methods: {

      nextBtn() {
        this.$router.push({ name: 'IsShowMarket' })
      },
  },

}
</script>

<style lang="scss" scoped>
.chart{
   width: 1600px;height: 650px;padding-left: 150px;
}
.chart-container {
  position: relative;
  height: 100vh;
  overflow: hidden;
}
.task {
  height: 100%;
  width: 100%;
  overflow-x: hidden;
  .taskTop {
    width: 100%;
    height: 15%;

    .title {
      width: 100%;
      height: 60%;
      font-size: 58px;
      letter-spacing: 10px;
      font-weight: 700;
      color: aliceblue;
      background-color: #0b45b0;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .phase {
      width: 100%;
      height: 40%;
      border: 1px solid rgb(185, 185, 185);
    }

  }
  .mainBtn {
    //width: 10%;
    height: 12%;
    display: flex;
    justify-content: center;
    align-items: center;
    .el-button {
      //padding-left: 100px;
      width: 20%;
      height: 44%;
      background-color: #0b5aff;
    }
  }
}

</style>


